<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>List Of Articles</title>

    <link rel="stylesheet"
          href='<c:url value="/web-resources/css/pure-0.4.2.css"/>'>

    <link rel="stylesheet"
          href='<c:url value="/web-resources/css/font-awesome-4.0.3/css/font-awesome.css"/>'>

    <link rel="stylesheet"
          href='<c:url value="/web-resources/css/jquery-ui.css"/>'>

    <style type="text/css">
        .ui-autocomplete-loading {
            background: white url("<c:url value='/web-resources/images/ui-anim_basic_16x16.gif'/>") right center no-repeat;
        }

        .ui-autocomplete-input {
            width: 250px;
        }

        #tabs {
            margin-top: 1em;
            width: 100%;
            height: auto;
        }

        #tabs li .ui-icon-close {
            float: left;
            margin: 0.4em 0.2em 0 0;
            cursor: pointer;
        }

        .chartdiv {
            width: 50%;
            height: 400px;
        }

        .news {
            width: 50%;
            height: 350px;
            background: white;
        }

        .news .header {
            margin-bottom: 10px;
            padding-top: 10px;
            padding-left: 20px;
        }

        .news ul {
            list-style: none;
            margin-top: 0.3em;
            padding: 0;
        }

        .news ul li {
            font-weight: bold;
            margin: 0;
            padding: 3px 10px 5px 20px;
            border-bottom: 1px solid #ccc;
            color: #666;
        }

        .news ul li:hover {
            color: #000;
            background-color: #ddd;
        }
    </style>
</head>

<c:url value="/chart/data/" var="chartDataUrl"/>
<c:url value="/news/list/" var="newsListUrl"/>

<body>
<div style="width: 95%; margin: 0 auto;">

    <h1>Main App</h1>

    <div>
        <div style="float: left;"><img src='<c:url value="/web-resources/images/small_logo.PNG"/>' height="25px"></div>
        <div class="ui-widget">
            <input id="searchInput" type="search" name="search"
                   placeholder="Search term"
                   class="ui-autocomplete-input"
                   autocomplete="off"/>
        </div>
    </div>

    <div id="tabs" class="ui-widget">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close"
                                                           role="presentation">Remove Tab</span></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec
                sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
                Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend
                adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut
                et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc
                tristique tempus lectus.</p>
        </div>
    </div>
    <%--<div class="ui-widget" style="margin-top:2em; font-family:Arial">--%>
    <%--Result:--%>
    <%--<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>--%>
    <%--</div>--%>
</div>

<!--  It is advised to put the <script> tags at the end of the document body so they don't block rendering of the page -->
<script type="text/javascript"
        src='<c:url value="/web-resources/js/lib/jquery-1.11.2.js"/>'></script>
<script type="text/javascript"
        src='<c:url value="/web-resources/js/lib/jquery-ui.js"/>'></script>
<script type="text/javascript"
        src='<c:url value="/web-resources/js/chart.js"/>'></script>
<script type="text/javascript"
        src='<c:url value="/web-resources/js/news.js"/>'></script>

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amstock.js"></script>

<script>
    $(function () {
        function log(message) {
            $("<div>").text(message).prependTo("#log");
            $("#log").scrollTop(0);
        }

        $("#searchInput").autocomplete({
            source: '<c:url value="/app/search"/>',
            minLength: 2,
            select: function (event, ui) {
                log(ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value);

                addTab(ui.item.value);
                this.value = "";
                return false;
            },
            // optional (if other layers overlap autocomplete list)
            open: function (event, ui) {
                $(".ui-autocomplete").css("z-index", 1000);
            }
        });

        var tabContent = $("#tab_content"),
                tabTemplate = "<li name='Test'><a href='{href}'>{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
                tabCounter = 2;

        var tabs = $("#tabs").tabs();

        //Makes tabs sortable
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            }
        });

        // actual addTab function: adds new tab using the input from the form above
        function addTab(term) {
            var label = term || "Tab " + tabCounter,
                    id = "tabs-" + tabCounter,
                    chartId = "chart-" + term + "-" + tabCounter,
                    newsId = "news-" + term + "-" + tabCounter,
                    li = $(tabTemplate.replace(/\{href\}/g, "#" + id).replace(/\{label\}/g, label)),
                    tabContentHtml = "<div class='chartdiv' id='" + chartId + "'/> <br/>" +
                            "<div class='news' id='" + newsId + "'/>";

            tabs.find(".ui-tabs-nav").append(li);
            tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
            tabs.tabs("refresh");
            $('#tabs').tabs('option', 'active', -1);
            makeChart('${chartDataUrl}' + term, chartId);
            loadNews('${newsListUrl}' + term, newsId);
            tabCounter++;
        }

        // close icon: removing the tab on click
        tabs.delegate("span.ui-icon-close", "click", function () {
            var panelId = $(this).closest("li").remove().attr("aria-controls");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
        });

        tabs.bind("keyup", function (event) {
            if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
                var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
                $("#" + panelId).remove();
                tabs.tabs("refresh");
            }
        });
    });
</script>
</body>
</html>